import React, { useEffect, useState } from 'react'
import { DatePicker, Button, Form, Select, Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import { getAdmList, getEmergencyItems } from '&/api/electricity'
import dayjs from 'dayjs'

const Filter = ({ handleQuery, paramsData, setParamsData, loading }) => {
  const [countValues, setCountValues] = useState([])
  const [dateFormat, setDateFormat] = useState('YYYY-MM-DD')
  const [industryList, setIndustryList] = useState([])
  const [hoursDiff, setHoursDiff] = useState(0)

  useEffect(() => {
    getAdmListData()
    getEmergencyItemsRequest()
  }, [])

  const click = () => {
    handleQuery(paramsData)
  }
  const onQueryChange = (v, t) => {
    if (t === 'time' && Array.isArray(v)) {
      const st = v[0].format('YYYY-MM-DD HH:00:00')
      const et = v[1].format('YYYY-MM-DD HH:00:00')
      setParamsData((state) => {
        state.start_time = st
        state.end_time = et
        return {
          ...state
        }
      })
    }
    if (t == 'area') {
      setParamsData((state) => {
        state.county_id = v
        return {
          ...state
        }
      })
    }
    if (t == 'time_type') {
      setParamsData((state) => {
        if (v == 1) {
          setDateFormat('YYYY-MM-DD HH:00:00')
        } else {
          setDateFormat('YYYY-MM-DD')
        }
        state.time_type = v
        return {
          ...state
        }
      })
    }
    if (t == 'status') {
      setParamsData((state) => {
        state.control_type = v
        return {
          ...state
        }
      })
    }
    if (t == 'change') {
      setParamsData((state) => {
        state.is_change = v
        return {
          ...state
        }
      })
    }
  }
  const getAdmListData = async () => {
    const res = await getAdmList({ adm_level: '3' })
    res.unshift({ county_id: -1, county_name: '全部' })
    setCountValues(res)
  }
  const getEmergencyItemsRequest = async () => {
    const result = await getEmergencyItems()
    const hangye = [
      {
        industry_type: '全部',
        industry_type_id: -1
      }
    ]
    result.industry.map((o) => {
      hangye.push({
        industry_type: o.industry_type_name,
        industry_type_id: o.industry_type_id
      })
    })
    setIndustryList(hangye)
  }
  return (
    <Form>
      <Form layout="inline">
        <Form.Item label="时间">
          <DatePicker.RangePicker
            showNow
            showTime
            value={[dayjs(paramsData.start_time), dayjs(paramsData.end_time)]}
            format={dateFormat}
            onChange={(v) => {
              onQueryChange(v, 'time')
            }}
          />
        </Form.Item>
        <Form.Item label="时间粒度">
          <Select
            onChange={(e) => {
              onQueryChange(e, 'time_type')
            }}
            defaultValue={paramsData.time_type}
          >
            <Select.Option value={1}>小时</Select.Option>
            <Select.Option value={2}>日</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="减排类型">
          <Select
            onChange={(e) => {
              onQueryChange(e, 'status')
            }}
            defaultValue={paramsData.control_type}
          >
            <Select.Option value={1}>差异化减排</Select.Option>
            <Select.Option value={2}>自主减排</Select.Option>
            <Select.Option value={3}>停产</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="区域选择">
          <Select
            placeholder={`请选择`}
            value={paramsData?.county_id}
            onChange={(v) => onQueryChange(v, 'area')}
          >
            {countValues &&
              countValues.map((item, index) => {
                return (
                  <Select.Option key={index} value={item.county_id}>
                    {item.county_name}
                  </Select.Option>
                )
              })}
          </Select>
        </Form.Item>
        <Form.Item label="变化率">
          <Select
            placeholder={`请选择`}
            value={paramsData?.is_change}
            onChange={(v) => onQueryChange(v, 'change')}
          >
            <Select.Option value={0}>关闭</Select.Option>
            <Select.Option value={1}>开启</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            onClick={() => click('query')}
            loading={loading}
            icon={<SearchOutlined></SearchOutlined>}
          >
            查询
          </Button>
        </Form.Item>
      </Form>
    </Form>
  )
}

export default Filter
